<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="/common/session.jsp" %>
<c:set var="rotationId" value="${param.rotationId}"/>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <LINK type="text/css" rel="stylesheet" href="${ctx}/css/default.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/RotationRpcService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/MarketRpcService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
    <style type="text/css">
    #preview{width:260px;height:190px;border:1px solid #cfdfe3;overflow:hidden;}
    #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
            //图片上传预览    IE是用了滤镜。
            function previewImage(file)
            {
              var MAXWIDTH  = 260;
              var MAXHEIGHT = 180;
              var div = document.getElementById('preview');
              if (file.files && file.files[0])
              {
                  div.innerHTML ='<img id=imghead>';
                  var img = document.getElementById('imghead');
                  img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
    //                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                  }
                  var reader = new FileReader();
                  reader.onload = function(evt){img.src = evt.target.result;}
                  reader.readAsDataURL(file.files[0]);
              }
              else //兼容IE
              {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id=imghead>';
                var img = document.getElementById('imghead');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
              }
            }
            function clacImgZoomParam( maxWidth, maxHeight, width, height ){
                var param = {top:0, left:0, width:width, height:height};
                if( width>maxWidth || height>maxHeight )
                {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;

                    if( rateWidth > rateHeight )
                    {
                        param.width =  maxWidth;
                        param.height = Math.round(height / rateWidth);
                    }else
                    {
                        param.width = Math.round(width / rateHeight);
                        param.height = maxHeight;
                    }
                }
                param.left = Math.round((maxWidth - param.width) / 2);
                param.top = Math.round((maxHeight - param.height) / 2);
                return param;
            }
    </script>
</head>
<body>
<form id="rotationForm"  name="rotationForm" enctype="multipart/form-data"  method="post"/>
	<center>
        <input type="hidden" id="userId" name="userId" value="${userId }" />
    	<input type="hidden" id="rotationId" name="rotationId" value="${rotationId}">
    	<input type="hidden" id="rotationImage"  name="rotationImage" maxlength="100" required/>
        <table width="100%" cellpadding="5" cellspacing="5">
            <tr>
                <td>
                    所属市场:
                </td>
                <td>
                    <select id="marketId" name="marketId" required>
        			</select>
                </td>
                <td>
                    发布状态:
                </td>
                <td>
                    <select id="rotationState" name="rotationState">
			            <option value="1">&nbsp;&nbsp;有效&nbsp;&nbsp;</option>
			            <option value="0">&nbsp;&nbsp;无效&nbsp;&nbsp;</option>
			        </select>
                </td>
            </tr>
            <tr>
                <td>
                    图片名称:
                </td>
                <td>
                    <input type="text" id="rotationName" name="rotationName" maxlength="10" required/>
                </td>
                <td>
                    图片排序:
                </td>
                <td>
                    <input type="number" id="rotationSeq" name="rotationSeq" maxlength="3" required/>
                </td>
            </tr>
            <tr>
                <td>
                    图片链接:
                </td>
                <td>
                    <input type="url" id="rotationUrl" name="rotationUrl" maxlength="100" required/>
                </td>
                <td>
                    显示时间:
                </td>
                <td>
                    <input type="number" id="rotationShowSeconds" name="rotationShowSeconds" maxlength="3" required/>
                </td>
            </tr>
            <tr>
            	<td>
                    图片上传:
                </td>
                <td>
                	<div id="preview">
			            <img id="imghead" width=100% height=auto border=0 >
			        </div>
                    <input type="file" onchange="previewImage(this)"  accept="image/jpg,image/jpeg,image/png"  name="file" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom: 1px solid #e1ecf5" colspan="6">
                </td>
            </tr>
            <tr>
                <td colspan="6" align="center">
                    <button type="button" onclick="insertOrUpdaterotation()">保存</button>
                    <button type="button" onclick="callbackrotation()">返回</button>
                </td>
            </tr>
        </table>
    </center>
</form>
</body>
</html>

<script>
	//    显示市场列表
	var market = new Market();
	market.marketId = "${marketId}";
	MarketRpcService.selectMarketList(market, callbackSelectMarketList);
	
	function callbackSelectMarketList(list) {
	    dwr.util.addOptions("marketId", list, "marketId", "marketName");
	    dwr.util.setValue("marketId", "${marketId}");
	    if ("${rotationId}".length > 0) {
	        selectRotation();
	    }
	}
	
	function selectRotation() {
	    var rotation = new Rotation();
	    rotation.rotationId = "${rotationId}";
	    RotationRpcService.selectRotationList(rotation, callbackSelectRotationList);
	}
	
	function callbackSelectRotationList(list) {
        var rotation = list[0];
        dwr.util.setValue("rotationSeq", rotation.rotationSeq);
	    dwr.util.setValues(rotation);
	    //图片回显
        $('#imghead').attr("src","${fdfsPath}"+rotation.rotationImage);
	} 
	
    function insertOrUpdaterotation() {  
    	
    	var rotationName = document.getElementById("rotationName").value;
    	if (rotationName == null || rotationName == '') {
            alert("请输入图片名称");
            return false;
        }
    	var rotationSeq = document.getElementById("rotationSeq").value;
    	if (rotationSeq == null || rotationSeq == '' ) {
            alert("请选择图片排序");
            return false;
        }
    	var rotationShowSeconds = document.getElementById("rotationShowSeconds").value;
    	if (rotationShowSeconds == null || rotationShowSeconds == '') {
            alert("请选择图片显示时间");
            return false;
        }
    	
        var formData = new FormData($( "#rotationForm" )[0]);  
        $.ajax({  
             url: '${ctx}/controller/insertOrUpdateRotation' ,  
             type: 'POST',  
             data: formData,  
             async: true,  
             // 下面三个参数要指定，如果不指定，会报一个JQuery的错误 
             cache: false,
             contentType: false,  
             processData: false,  
             dataType: "json",
             success: function (returndata) { 
            	 if(returndata.code == 1){
                     setTimeout('alert(returndata.msg)',1000);
            		 location = "${ctx}/cms/rotation_list.jsp";
            	 }else{
            		 alert(returndata.msg);
            	 }
             },  
        });   
    } 
    
    function callbackrotation() {
        location = "${ctx}/cms/rotation_list.jsp";
    }
</script>
